<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" v-model="staffName"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="list"></el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="730"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              prop="staffName"
              label="员工名称"
              width="180">
          </el-table-column>
          <el-table-column
              label="员工头像"
              width="180">
            <template slot-scope="scope">
              <el-image style="width: 120px;" :src="scope.row.staffImageUrl">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="staffNumber"
              label="员工账号"
              width="180">
          </el-table-column>
<!--          <el-table-column-->
<!--              prop="staffPhone"-->
<!--              label="员工手机号">-->
<!--          </el-table-column>-->
<!--          <el-table-column-->
<!--              prop="addUser"-->
<!--              label="添加人">-->
<!--          </el-table-column>-->
          <el-table-column
              label="账号状态">
            <template slot-scope="scope">
              {{scope.row.status === 0?'正常':'停用'}}
            </template>
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作">
            <template slot-scope="scope">
              <span><el-button style="color: #058a05" v-if="scope.row.status === 1" type="text" @click="openUpdateWindow(scope.row)">启用</el-button></span>
              <span><el-button style="color: #e36d6d" v-if="scope.row.status === 0" type="text" @click="openUpdateWindow(scope.row)">停用</el-button></span>
              <span><el-button type="text" @click="openRestWindow(scope.row.id)">重置密码</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[4, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      staffName:'',
      pageSize: 4,
      pageNum:1,
      total:0,
      tableData:[]
    }
  },
  /*自动挂载*/
  mounted() {
    this.list()
  },
  /*函数*/
  methods:{
    /*重置窗口*/
    openRestWindow(id) {
      this.$confirm('此操作将永久重置密码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.restPassword(id)
      }).catch(() => {
        this.MyMessage('取消重置','info')
      });
    },
    /*修改状态窗口*/
    openUpdateWindow(data) {
      this.$confirm('此操作将修改用户状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.updateStatus(data)
      }).catch(() => {
        this.MyMessage('取消修改','info')
      });
    },
    /*重置密码*/
    updateStatus(data){
      var status = 0;
      if (data.status === 0){
        status = 1
      }
      this.$axios.get('memberZjx/Staffs/updateSTatus/'+data.id+'/' + status).then(res => {
        if (res.data.code === 200){
          if (data.status === 1){
            this.MyMessage('用户'+data.staffName+'启用成功','success');
          }else{
            this.MyMessage('用户'+data.staffName+'停用成功','success');
          }
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*重置密码*/
    restPassword(id){
      this.$axios.get('memberZjx/Staffs/rest/'+id).then(res => {
        if (res.data.code === 200){
          this.MyMessage('重置密码成功','success');
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*全查*/
    list(){
      this.$axios.get('memberZjx/Staffs/list',{
        params:{
          staffName: this.staffName,
          pageNum: this.pageNum,
          pageSize:this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>